<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home_emp' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>应聘流程</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图区域-->
        <el-card>
            <!--流程列表区域-->
            <el-table :data="prolist" :border="true" :stripe="true">
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column prop="posID" label="岗位编号"></el-table-column>
                <el-table-column prop="name" label="岗位名称"></el-table-column>
                <el-table-column prop="company" label="所属公司"></el-table-column>
                <el-table-column prop="status" label="流程状态"></el-table-column>
                <el-table-column label="岗位详情">
                    <template v-slot="scope">
                        <el-button type="success" @click="showDialog(scope.row.posID)">查看详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
                            <el-button type="warning" @click="showproDialog(scope.row.id)">
                                <el-icon style="vertical-align: middle;">
                                    <edit />
                                </el-icon>
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--查看详情对话框-->
        <el-dialog title="岗位详情" v-model="Visible" width="50%" @close="DialogClosed">
            <!--内容主体区域-->
            <el-descriptions class="margin-top" title="详情信息" :column="3" :size="size" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            岗位编号
                        </div>
                    </template>
                    {{this.detail.posID}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            岗位名称
                        </div>
                    </template>
                    {{this.detail.posName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            岗位大类
                        </div>
                    </template>
                    {{this.detail.bigType}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            岗位小类
                        </div>
                    </template>
                    {{this.detail.smallType}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            最低薪资
                        </div>
                    </template>
                    {{this.detail.salary}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            实习岗位
                        </div>
                    </template>
                    {{this.detail.intern}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            工作地点
                        </div>
                    </template>
                    {{this.detail.site}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            所属公司
                        </div>
                    </template>
                    {{this.detail.comp}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            负责HR
                        </div>
                    </template>
                    {{this.detail.posHR}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            岗位要求
                        </div>
                    </template>
                    {{this.detail.request}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            岗位职责
                        </div>
                    </template>
                    {{this.detail.response}}
                </el-descriptions-item>
            </el-descriptions>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="Visible = false" class="btns">关 闭</el-button>
            </span>
        </el-dialog>
        <!--查看流程对话框-->
        <el-dialog title="应聘流程" v-model="proVisible" width="50%" @close="proDialogClosed">
            <el-steps :active="this.changeStatus.status" finish-status="success">
                <el-step title="已投递简历"></el-step>
                <el-step title="同意参加面试"></el-step>
                <el-step title="面试审核"></el-step>
                <el-step title="发放offer"></el-step>
                <el-step title="完成应聘"></el-step>
            </el-steps>
            <el-button style="margin-top: 12px;" :disabled="this.changeStatus.status>2"
                @click="next(this.changeStatus.id)">下一步</el-button>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data() {
        return {
            prolist: [

            ],
            //查看岗位详情
            detail: {
                posID: 20,
                posName: '架构师',
                bigType: '计算机',
                smallType: '后端开发',
                salary: 50000,
                intern: 0,
                site: '南京',
                comp: '比特摇摆 BitShake',
                posHR: '丁真',
                request: '35周岁以下, 40年工作经验',
                response: '架构',
                flag: 0
            },
            //修改流程状态
            changeStatus: {
                status: 0,
                id: 0
            },
            total: 0,
            //控制查看详情对话框的显示与隐藏
            Visible: false,
            //控制流程对话框的显示与隐藏
            proVisible: false
        }
    },
    created() {
        this.getpro_empList();
    },
    methods: {
        async getpro_empList() {
            const json = {
                empID: window.sessionStorage.getItem('token')
            };
            const { data: res } = await this.$http.post('getProcessByEmp', json)
            console.log(res);
            if (res.error_code !== 0) {
                return this.$message.error('获取岗位信息失败！')
            }
            this.prolist = []
            this.total = res.data.size;
            for (var i = 0; i < this.total; i++) {
                this.prolist.push({
                    id: res.data.ProcessList[i].ID,
                    posID: res.data.ProcessList[i].posID,
                    employee: res.data.ProcessList[i].empID,
                    name: res.data.ProcessList[i].posName,
                    company: res.data.ProcessList[i].compName,
                    status: res.data.ProcessList[i].status
                });
            }
        },
        //监听查看详情对话框的关闭事件
        DialogClosed() {
            this.Visible = false
        },
        proDialogClosed() {
            this.proVisible = false
        },
        //展示查看详情对话框
        async showDialog(id) {
            const json = {
                posID: id
            };
            
            const { data: res } = await this.$http.post('getPositionByID' , json)
            console.log(res);
            if(res.error_code !== 0){
                return this.$message.error('查看详情失败！')
            }
            this.detail = res.data
            this.detail.flag = res.data.flag === 0 ? '未审核':'通过';
            this.detail.intern = res.data.intern === 0 ? '否':'是';
            this.Visible = true
        },
        //展示招聘流程对话框
        async showproDialog(id) {
            const json = {
                proID: id
            };
            const { data: res } = await this.$http.post('getStatusByID' , json)
            if(res.status === -1){
                return this.$message.error('查看流程失败！')
            }
            this.changeStatus.status = res.status
            this.changeStatus.id = id
            this.proVisible = true
        },
        //流程下一步
        async next(proid) {
            if (this.changeStatus.status < 2) {
                this.changeStatus.status++;
                this.changeStatus.id = proid;
                const { data: res } = await this.$http.post('changeStatus' , this.changeStatus)
                console.log(res);
                if(res.result !== "true") {
                    return this.$message.error('查看流程失败！')
                }
            }
            this.getpro_empList();
        }
    }
}
</script>

<style lang="less" scoped>
.btns {
    margin-top: 15px;
}
</style>